<template>
  <v-app id="inspire">
    <v-system-bar app height="30" color="#2e2828" style="color: gray">
      <v-container class="ml-16 pl-16">
        <v-row dense>
          <v-col cols="1">首页</v-col>
          <v-spacer/>
          <v-col cols="1">请登录</v-col>
          <v-col cols="1">我的订单</v-col>
          <v-col cols="1">购物车</v-col>
          <v-col cols="1">我是商家</v-col>
          <v-col cols="1">我的魔术菇</v-col>
        </v-row>
      </v-container>
      <v-spacer></v-spacer>

      <v-icon color="white">mdi-square</v-icon>

      <v-icon color="white">mdi-circle</v-icon>

      <v-icon color="white">mdi-triangle</v-icon>
    </v-system-bar>

    <v-app-bar class="mt-8"
               v-if="$route.path==='/'"
               app
               absolute
               hide-on-scroll
               prominent
               scroll-target="#scrolling-techniques-4">
      <v-row class="pt-4">
        <v-col cols="2"></v-col>
        <v-col cols="1">
          <v-img src="../../assets/logo.png" contain max-height="100" cla ></v-img>
        </v-col>
        <v-col cols="5">
          <v-text-field
              label="搜索"
              solo-inverted
              append-icon="mdi-magnify"
              @click:append="searchHandle"
              dense
              v-model="searchStr"
              flat
          ></v-text-field>
          <v-btn text style="color: #e1251b">秒杀</v-btn>
          <v-btn text style="color: #e1251b">优惠券</v-btn>
          <v-btn text>其他</v-btn>
          <v-btn text>魔术菇会员</v-btn>
          <v-btn text>某某</v-btn>
        </v-col>
        <v-col cols="2">
          <v-btn text style="color: #e1251b">我的购物车</v-btn>
        </v-col>
        <v-col cols="2">
          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-img src="../../assets/phoneApp.png"
                     v-bind="attrs"
                     v-on="on"
                     contain width="80"/>
            </template>
            <span>扫码，下载手机app</span>
          </v-tooltip>
        </v-col>
      </v-row>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
    </v-app-bar>
    <v-app-bar class="mt-8"
               v-else-if="$route.path==='/goodsList' || $route.path==='/goodsShow'"
               app
               dense
               absolute
               hide-on-scroll
               prominent
               flat
               scroll-target="#scrolling-techniques-4">
      <v-row class="pt-4">
        <v-col cols="2" class="mt-8 pl-16">
          <AllGoodsCategory/>
        </v-col>
        <v-col cols="1">
          <v-img src="../../assets/logo.png" contain max-height="50" cla ></v-img>
        </v-col>
        <v-col cols="5">
          <v-text-field
              label="搜索"
              solo-inverted
              append-icon="mdi-magnify"
              @click:append="noJumSearchHandle"
              v-model="searchStr"
              dense
              flat
          ></v-text-field>
        </v-col>
        <v-col cols="2">
          <v-btn text style="color: #e1251b">我的购物车</v-btn>
        </v-col>
        <v-col cols="2">
          <v-btn text class="mt-10">心愿单</v-btn>
        </v-col>
      </v-row>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
    </v-app-bar>
    <v-app-bar class="mt-8"
               v-else
               app
               dense
               absolute
               hide-on-scroll
               prominent
               flat
               style="height: 70px"
               scroll-target="#scrolling-techniques-4">
      <v-row class="pt-4">
        <v-col cols="2" class="mt-8 pl-16">
        </v-col>
        <v-spacer/>
        <v-col cols="4">
          <v-text-field
              label="搜索"
              solo-inverted
              append-icon="mdi-magnify"
              @click:append="noJumSearchHandle"
              v-model="searchStr"
              hide-details
              dense
              flat
          ></v-text-field>
        </v-col>
        <v-col cols="2">
          <v-btn text style="color: #e1251b">我的购物车</v-btn>
        </v-col>
      </v-row>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
    </v-app-bar>


    <v-navigation-drawer
        v-model="drawer"
        fixed
        temporary
    >
      <!--  快捷操作-->
    </v-navigation-drawer>

    <v-main class="grey lighten-2">
      <router-view/>
    </v-main>

    <v-footer
        padless
        color="#e0e0e0"
    >
      <v-container>
        <v-card
            color="#e0e0e0"
            flat
            tile
            class="text-center"
        >
          <v-card-text>
            <v-row class="black--text text-h6">
              <v-col cols="3"><span style="color: red">多&nbsp;</span>十强企业，质量保证</v-col>
              <v-col cols="3"><span style="color: red">快&nbsp;</span>7天退货，15天换货</v-col>
              <v-col cols="3"><span style="color: red">好&nbsp;</span>0元起免运费</v-col>
              <v-col cols="3"><span style="color: red">省&nbsp;</span>后续服务，可能没有</v-col>
            </v-row>
          </v-card-text>
          <v-card-text>
            <v-btn
                v-for="icon in icons"
                :key="icon"
                class="mx-4"
                icon
            >
              <v-icon size="24px">
                {{ icon }}
              </v-icon>
            </v-btn>
          </v-card-text>
          <v-divider></v-divider>

          <v-card-text>
            <v-row>
              <v-col cols="9">
                <v-row>
                  <v-col cols="2">
                    <p class="ml-5"><strong>购物指南</strong></p>
                    <ul>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li>
                      <li style="list-style: none"><a style="color: gray">会员介绍</a></li>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li><li style="list-style: none"><a style="color: gray">购物流程</a></li>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li>
                    </ul>
                  </v-col>
                  <v-col cols="2">
                    <p class="ml-5"><strong>购物指南</strong></p>
                    <ul>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li>
                      <li style="list-style: none"><a style="color: gray">会员介绍</a></li>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li><li style="list-style: none"><a style="color: gray">购物流程</a></li>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li>
                    </ul>
                  </v-col>
                  <v-col cols="2">
                    <p class="ml-5"><strong>购物指南</strong></p>
                    <ul>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li>
                      <li style="list-style: none"><a style="color: gray">会员介绍</a></li>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li><li style="list-style: none"><a style="color: gray">购物流程</a></li>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li>
                    </ul>
                  </v-col>
                  <v-col cols="2">
                    <p class="ml-5"><strong>购物指南</strong></p>
                    <ul>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li>
                      <li style="list-style: none"><a style="color: gray">会员介绍</a></li>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li><li style="list-style: none"><a style="color: gray">购物流程</a></li>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li>
                    </ul>
                  </v-col>
                  <v-col cols="2">
                    <p class="ml-5"><strong>购物指南</strong></p>
                    <ul>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li>
                      <li style="list-style: none"><a style="color: gray">会员介绍</a></li>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li><li style="list-style: none"><a style="color: gray">购物流程</a></li>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li>
                    </ul>
                  </v-col>
                  <v-col cols="2">
                    <p class="ml-5"><strong>购物指南</strong></p>
                    <ul>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li>
                      <li style="list-style: none"><a style="color: gray">会员介绍</a></li>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li><li style="list-style: none"><a style="color: gray">购物流程</a></li>
                      <li style="list-style: none"><a style="color: gray">购物流程</a></li>
                    </ul>
                  </v-col>
                </v-row>
              </v-col>
              <v-divider vertical/>
              <v-col cols="3" class="text-center">
                <v-card-title>10086-123</v-card-title>
                <v-card-subtitle>7x24小时客服热线（仅收市话费）</v-card-subtitle>
                <v-btn color="#333333" class="rounded-xl white--text">在线客服</v-btn>
              </v-col>
            </v-row>
          </v-card-text>

          <v-divider></v-divider>

          <v-card-text class=" pt-2">
            京公网安备 11000002000088号|京ICP备11041704号|互联网药品信息服务资格证编号(京)-经营性-2014-0008|新出发京零 字第大120007号
            互联网出版许可证编号新出网证(京)字150号|出版物经营许可证|网络文化经营许可证京网文[2020]6112-1201号|违法和不良信息举报电话：4006561155
            Copyright © 2004 - 2021  京东JD.com 版权所有|消费者维权热线：4006067733|经营证照|(京)网械平台备字(2018)第00003号|营业执照
            </v-card-text>

          <v-divider></v-divider>

          <v-card-text class="">
            {{ new Date().getFullYear() }} — <strong>Magic-shroom</strong>
          </v-card-text>
        </v-card>
      </v-container>
    </v-footer>
  </v-app>
</template>

<script>
import AllGoodsCategory from "@/components/AllGoodsCategory";
export default {
  name:'Index',
  components: {AllGoodsCategory},
  created() {
    console.log(this.$route)
  },
  data: () => ({
    drawer: null,
    searchStr:''
  }),
  methods:{
    searchHandle(){
      this.$router.push({
        path:'goodsList',
        query:{
          searchStr:this.searchStr
        }
      })
    },
    noJumSearchHandle(){
      this.$router.push({
        path:'goodsList',
        query:{
          searchStr:this.searchStr
        }
      })
      this.$router.go(0)
    },
  }
}
</script>

<style scoped>

</style>
